<template>
	<div class="demo-rich-conent" style="display: flex">
	
		<div class="weixin" @mouseenter="handleMouseEnter(1)" @mouseleave="handleMouseLeave">
			<span class="iconfont icon-weixin" style="color: #04D268"> </span>
			
			<span class="name">微信</span>
		</div>
		<div class="weixin" @mouseenter="handleMouseEnter(2)" @mouseleave="handleMouseLeave">
			<span class="iconfont icon-QQ"  style="color: #4A9AFD"> </span>
			<span class="name">QQ</span>
		</div>
		<div class="weixin" @mouseenter="handleMouseEnter(3)" @mouseleave="handleMouseLeave">
			<span class="iconfont icon-MicroBlog"  style="color: #F7071B"> </span>
			<span class="name">新浪微博</span>
		</div>
		<div class="weixin" @mouseenter="handleMouseEnter(4)" @mouseleave="handleMouseLeave">
			<span class="iconfont icon-a-qqspace"  style="color: #FFCD00"> </span>
			<span class="name">QQ空间</span>
		</div>
		<div class="weixin" @mouseenter="handleMouseEnter(5)" @mouseleave="handleMouseLeave">
			<span class="iconfont icon-Douban"  style="color: #3CD38E"> </span>
			<span class="name">豆瓣</span>
		</div>
	</div>
</template>

<script>
 export default {
 		props: ['type', 
 		'detailInfo'],
 		data() {
 			return {
 			
 			}
 		},
 		methods: {
 			handleMouseEnter(val) {
 					  this.$emit('handleMouseEnter',val)
 					},
 		}
 	}
 </script>
</script>

<style>
	.demo-rich-conent {
	  width: 150px;
	  padding: 5px 0;
	  display: flex;
	  flex-direction: column;
	}
	.demo-rich-conent .weixin {
	  box-sizing: border-box;
	  padding-left: 16px;
	  width: 100%;
	  height: 40px;
	  line-height: 40px;
	  display: flex;
		margin-left: -13px;
	  align-items: center;
	}
	.demo-rich-conent .weixin .iconfont {
	  font-size: 30px;
	  color: #fff;
	  border-radius: 50%;
	}
	.demo-rich-conent .weixin .name {
	  line-height: 40px;
	  margin-left: 12px;
	  height: 14px;
	  font-size: 14px;
	  font-weight: 400;
	  color: #333333;
	  line-height: 14px;
	}
	.demo-rich-conent .weixin:hover {
	  background: #F8F8F8;
	}
	
</style>
